<template>
  <div class="header">
    <h1>
      <span class="e-left">『</span>
      <span class="text">{{title}}</span>
      <span class="e-right">』</span>
    </h1>
    <h4>{{description}}</h4>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String
    },
    description: {
      type: String
    }
  },
  data() {
    return {}
  },
  components: {}
}
</script>

<style lang='scss' scoped>
.header {
  background: url(../assets/pic/category.jpg) no-repeat;
  background-size: cover;
  padding: 96px 0 28px;
  text-align: center;

  h1 {
    position: relative;
    font-weight: 400;
    font-size: 30px;
    margin: 0 auto;
    margin-bottom: 10px;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.89);
    text-shadow: 0 4px 8px rgba(7, 17, 27, 0.4);

    .e-left {
      position: relative;
      left: 2px;
      top: -12px;
    }
    .e-right {
      right: 2px;
      top: -10px;
      position: relative;
    }
    .text {
      max-width: 660px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      display: inline-block;
    }
  }

  h4 {
    font-weight: 400;
    font-size: 16px;
    color: rgba(255, 255, 255, 0.54);
  }
}
</style>
